#baiduMap{
	height: 774px;
}
.timeline {
		width: 45.5%;
		min-width: 640px;
		border: 1px solid #ccc;
	}
	
	.starOpen {
		display: inline-block;
		width: 50px;
		height: 50px;
	}
	
	.slow,
	.quick {
		display: inline-block;
		width: 35px;
	}
	
	.lineView {
		display: inline-block;
		width: 100%;
		height: 2px;
		border: 2px solid #0087ff;
		position: relative;
	}
	
	.partial-2,
	.partial-1 {
		display: inline-block;
	}
	
	.partial-2 {
		width: 80%;
		max-width: 500px;
		position: relative;
	}
	
	.progress {
		position: absolute;
		width: 12px;
		height: 12px;
		background-color: #0087ff;
		margin-left: -6px;
		top: 6px;
		z-index: 99;
		border-radius: 50%;
	}
	
	.timerPart ul {
		margin-left: -4px;
		padding: 0;
	}
	
	.timerPart ul li {
		list-style: none;
		float: left;
		width: 10%;
		padding-top: 5px;
		text-align: right;
	}
	
	.timerPart {
		position: relative;
		margin: -8px auto;
	}
	
	.linePoint {
		width: 1%;
		height: 2px;
		display: inline-block;
	}
	
	.lineView .color_blue {
		background-color: blue;
	}
	
	.lineView .color_gray {
		background-color: #ccc;
	}
	
	.scroll-content {
		margin: 0;
	}
	
	.form-group {}
	
	.treeEvent {
		border: 1px solid #ccc;
		width: 115px;
		background-color: #ebeff2;
		position: fixed;
		top: -20%;
		left: 100%;
		opacity: 1;
		padding: 0 1px;
		text-align: center;
		border: 1px solid #cbdaeb;
		color: rgb(88, 145, 180);
	}
	
	.treeEvent ul {
		margin: 0;
	}
	
	.treeEvent li {
		padding: 2px 0;
		list-style-type: none;
		margin: 5px 0;
	}
	
	.jstree-container-ul {
		margin: 0px -15px;
	}
	
	.search-filter-header {
		padding: 8px;
	}
	
	.smaller .btn {
		padding: 2px 10px;
	}
	
	.mousedownRight {
		background-color: #e7e7e7;
	}
	@media screen and (min-width: 300px) and (max-width: 760px) {
		.enclosure {
			display: none;
		}
	}
	
	
	@media screen and (min-width: 980px) and (max-width: 1760px) {
		.listView {
			width: 25%;
		}
	}
	
	@media screen and (min-width: 980px) and (max-width: 1760px) {
		.mapView {
			width: 75%;
		}
	}
	
	li {
		list-style: none;
	}
	
	.p1 {
		padding-left: 10px;
	}
	
	.massageDiv {
		width: 400px;
		height: 240px;
		margin: 20 auto;
		border: 1px solid #ccc;
		position: relative;
		background-color: white;
	}
	
	.p1 {
		font-width: 10px;
		line-height: 30px;
		height: 30px;
		color: white;
		background-color: rgb(63, 133, 228);
	}
	
	.content {
		display: flex;
	}
	
	.contentImage {
		flex: 2;
	}
	
	.contentImage-img {
		height: 138px;
		width: 113px;
		margin: 15px 0 0 15px;
	}
	
	.contentImage-img img {
		width: 85%;
		margin: 18px 10px;
	}
	
	.contentText {
		margin: 15px 0px 0 0;
		flex: 8;
	}
	
	.contentText ul {
		width: 100%;
		margin: -5px 0 0 0;
	}
	
	.contentText ul li {
		width: 100%;
		margin-top: 3px;
	}
	
	.leftSpan {
		display: inline-block;
		width: 80px;
		height: 22px;
		text-align: right;
		color: rgb(148, 148, 148);
	}
	
	.rightSpan {
		color: rgb(78, 78, 74);
		display: inline-block;
	}
	
	.navList {
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	
	.navList ul {
		margin: 0;
		display: flex;
	}
	
	.navList li {
		flex: 1;
		height: 30px;
		color: white;
		line-height: 30px;
		border: 1px solid white;
		background-color: rgb(238, 239, 244);
		text-align: center;
	}
	
	.bottomText {
		height: 30px;
		letter-spacing: 1px;
		margin: 10px 0 0 15px;
		color: rgb(78, 78, 74);
	}
	
	.bottomText span {
		color: rgb(148, 148, 148);
	}
	
	.hideDiv {
		display: none;
	}
	
	#result {
		position: absolute;
		bottom: 2%;
		display: none;
	}
	
	.event {
		border-bottom: 1px solid #9fcff8;
	}
	
	.trajectoryControl .slowTime {
		position: absolute;
		bottom: 5px;
		left: 47%;
	}
	
	.deviceIdLabel,
	.carNumberLabel {
		margin-top: 6px;
	}
	
	.carNumber {
		padding: 0 12px!important;
	}
	
	.deviceId {
		padding: 0 12px!important;
	}
	
	.BMap_cpyCtrl,
	.anchorBL {
		display: none;
	}
	
	.lookUnlading {
		border-radius: 4px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		background-color: rgba(40,46,59,0.35);
		color: white;
		position: absolute;
		right: -40px;
		top: 22px;
		font-size: 25px;
		padding: 2px;
	}
	
	.lookUnlading i {
		margin: 0 5px;
	}
	
	.upDownPoint {
		background-color: #d2f8cc !important;
	}
	
	.starOpen img,
	.slow img,
	.quick img {
		width: 80%;
		margin: 10%;
	}
	.slow,.quick{
		position: relative;
	}
	
	.slow:hover .note{
		display: block;
		
	}
	.slow .note{
		width: 50px;
	    position: absolute;
	    top: -15px;
	    left: -12px;
	    display: none;
	}
	.quick .note{
		width: 50px;
	    position: absolute;
	    top: -15px;
	    left: 12px;
	    display: none;
	}
	.quick:hover .note{
		display: block;
	}
	.trajectoryControl {
		/*width: 50%;*/
		position: absolute;
		bottom: 0;
		z-index: 99;
	}
	
	.leftbar{
	    background-color: #4169e1;
	    height: 8px;
	    position: absolute;
	    left: 0px;
	    top: 25px;
	    z-index: 1;
	}
	.rightbar{
		background-color: #ff4500;
	    height: 8px;
	    position: absolute;
	    right: 0px;
	    top: 25px;
	    z-index: 1;
	}
	.speedBar{
	    width: 408px;
	    border-radius: 5px;
	    height: 200px;
	    position: absolute;
	    background: #fefbfb;
	    z-index: 1;
	    right: 12px;
	    bottom: 46px;
	    box-shadow: 1px 1px 16px #959494;
	    padding: 10px;
	}
	.barSpeed{
		display: flex;
	}
	.barSpeed li{
		flex: 1;
	}
	.barSpeed li span{
		height: 5px;
		width: 1px;
		background-color: red;
		display: inherit;
	}
	.speedBtn{
		/*background-color: rgba(51,133,255,0.72);*/
		color: white;
		position: absolute;
		right: 30px;
		margin-right: 0;
		left: inherit;
		top: inherit;
		bottom: 5px;
		z-index: 1;
	}
	@media only screen and (max-width: 479px){
		.speedBtn{
		   display: none;
		}
	}
	.bar_title{
	    padding: 10px 0;
		margin-bottom: 10px;
		font-size: 18px;
	}
	.btnGroup{
		margin-top: 20px;
	}
	.btnGroup .btn-xs{
		
		float: right;
		
	}
	.saveColor{
		/*background-color: rgba(51,133,255,0.72);*/
		/*background-color: #1A6DDD;*/
		/*color: white;*/
	}
	
	
	/*围栏标注部分样式*/
	.enclosure li{
		background: white;
		padding: 8px;
	    border-radius: 3px;
	    color: #3f1515;	  
		font-size: 12px;
		border-bottom:1px solid #ccc;
	}
	.enclosure li:hover{
	 	color: white;
		background:#3bbaf2;
	}
	
	.deployTitle{
		height: 34px;
		line-height: 34px;
	    font-size: 17px;
	    font-weight: bold;
	    text-align: center;
	    border-bottom: 1px solid rgba(144,167,186,0.34);
	}
	.clearfix .styleInp{
		height: 28px;
	    border-radius: 4px ;
	    padding-top: 6px;
	}
	.deployRail{
		border: 1px solid #eee;
		position: absolute;
		right: 100px;
		top: 120px;
		z-index:9;
		background:#fafafa;
		width:270px;
		font-size: 12px;
	    border-radius: 6px;
		box-shadow: 5px 6px 10px -5px #697bc3;
	}
	.deployRail .smaller .btn{
		margin-left: 5px;
	    float: right;
	    border-radius: 4px;
	    font-size: 13px;
	    min-width:68px;
	    
	}
	
	.enclosure ul .selectRail{
		background:rgb(55,164,249);
		color:white;
	}
	
	.slectColor{
		padding: 3px 0;
	    margin: 0;
	}
	.slectColor li{
		width:18px;
		height:18px;
		float:left;
		margin-right:10px;
	}
	.myColor{
		font-size:15px;
		color:white;
		text-align: center;
	    line-height: 16px;
	}

	#saveDeployBtn{
		background-color: #1A6DDD;
	    border: none;
	    color: white;
	    padding: 3px 10px;
	}
	
	.rail1,.rail2{
	
		position: relative;
	}
	
	.railType{
	    display: none;
	    background: rgba(87,74,74,0.76);
	    color: white;
	    height: 28px;
	    position: absolute;
	    top: 5px;
        right: 45px;
	    border-radius: 8%;
	    line-height: 28px;
	    text-align: center;
        padding: 0 6px;
	    white-space: nowrap;
	}
	.rail1:hover .railHover1{
		display:block;
		
	}
	.rail2:hover .railHover2{
		display:block;
		
	}
	.deployType{
		padding:0;
		height: 26px;
		border-color: #CCCCCC;
		padding: 0 6px;
	}
	.range {
		height: 26px;
		padding: 0;
		padding-left: 12px;
		border-color: #CCCCCC;
	}
	.scrollTable{
		/*position: absolute;
		bottom: 13px;
		left: 13px;
		right: 13px;*/
		max-height: 320px;
		
		/*overflow: scroll;*/
	}
	.deployLabel{
		text-align:right;
		padding: 5px 0;
	}
	/*.carNumber,.deviceId{
		min-width: 45px;
		
	}
	.carNumberLabel,.deviceIdLabel{
		min-width: 45px;
	}*/


	@media screen and (min-width: 1200px) and (max-width: 1500px) {
		.mediaDiv {
			width: 24%;
		}
	}
	
	
	@media screen and (max-width: 1200px) {
		.slowTime,.partial-2{
			display: none;
		}
		.timeline{
			min-width:100%
		}
	}
	.seachDiv {
	    max-width: 210px;
	    position: absolute;
		left: 5px;
		top: 5px;
		
	}
	.seachDiv .btn{
		min-width: 36px;
		margin: 0;
	}
	.s_map_btn{
		margin-left: 13px;
	}
	.s_map_btn .form-control{
		margin-bottom: 0;
		line-height: 26px;
		height: 26px;
		box-sizing: border-box;
		border:none!important;
		/*padding: 0;*/
	}
	.s_map_btn .control-label{
		line-height: 26px;
		background-color: #ccc;
		margin: 0;
		color: #333;
		line-height: 26px;
		padding-left:8px;
		padding-right: 0;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.s_map_btn .mediaDiv{
		/*width: 80px;*/
		border: 1px solid #ccc;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0;
		border-radius: 4px;
		margin-bottom: 0;
	}
	.s_map_btn .form-group{
		margin:0 12px 12px 0;
	}
	.chartWarp{
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    z-index: 999;
	    background: white;
	    width: 100%;
	}
	.closeChart{
	    position: absolute;
	    right: 8px;
	    font-size: 24px;
        border: none;
        background: none;
	    z-index: 999;
	}
	#pointInfo{
		position: absolute;
		top: 0;color: orangered;
		
	}
